<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片轮播</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <style>
        #app {
            width: 400px;
            margin: 50px auto;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .carousel {
            display: flex;
            transition: transform 0.5s ease-in-out;
            width: 100%;
        }

        .carousel img {
            width: 100%;
            height: auto;
        }

        .controls {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
        }

        .controls button {
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            border-radius: 5px;
        }

        .indicators {
            margin-top: 10px;
        }

        .indicators span {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            background-color: #ccc;
            border-radius: 50%;
            cursor: pointer;
        }

        .indicators .active {
            background-color: #000;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="carousel" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
            <img v-for="(image, index) in images" :key="index" :src="image" :alt="'Image ' + (index + 1)">
        </div>
        <div class="controls">
            <!-- 左箭头：仅在当前索引不是最后一张时显示 -->
            <button v-if="currentIndex < images.length - 1" @click="nextSlide">▶</button>
            <!-- 右箭头：仅在当前索引不是第一张时显示 -->
            <button v-if="currentIndex > 0" @click="prevSlide">◀</button>
        </div>
        <div class="indicators">
            <span v-for="(image, index) in images" :key="index" :class="{ active: currentIndex === index }"
                @click="goToSlide(index)"></span>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    images: [
                        "https://ts1.cn.mm.bing.net/th/id/R-C.5e5fe8506ba67c7334777b44e4bd97b8?rik=OZS%2bvXN9%2bjJ7ag&riu=http%3a%2f%2fmedia.rockstargames.com%2frockstargames%2fimg%2fglobal%2fnews%2fupload%2f12_gtavpc_03272015.jpg&ehk=FtU%2bFzKOhO7KrD5p%2bD7kxaSAge4at%2ft6xYiUNRUJFUM%3d&risl=1&pid=ImgRaw&r=0",
                        "https://ts1.cn.mm.bing.net/th/id/R-C.55e8140e36e2acdf2f4d16913fcffe58?rik=BGv7UggiKAazfQ&riu=http%3a%2f%2fpic.3h3.com%2fup%2f2013-9%2f20139129548108200.jpg&ehk=EOwMry7g%2fgHwy7nsO%2f6Rzr%2fj3QOJKDEP7whc224xW%2bM%3d&risl=&pid=ImgRaw&r=0",
                        "https://tse3-mm.cn.bing.net/th/id/OIP-C.H2HeXJUQDEY1-5Ln6k8UsAHaEK?rs=1&pid=ImgDetMain"
                    ],
                    currentIndex: 0
                };
            },
            methods: {

                nextSlide() {
                    if (this.currentIndex < this.images.length - 1) {
                        this.currentIndex++;
                    }
                },
                prevSlide() {
                    if (this.currentIndex > 0) {
                        this.currentIndex--;
                    }
                },
                goToSlide(index) {
                    this.currentIndex = index;
                }
            }
        }).mount('#app');
    </script>
</body>

</html>